<template>
  <div class="category">
    <category-bar></category-bar>
    <category-left :leftInfo="leftList" @leftClick="leftClick"></category-left>
    <category-right
      :rightInfo="rightInfo"
      :titleInfo="showGoods"
      @titleClick="titleClick"
    ></category-right>
  </div>
</template>

<script>
import CategoryBar from "views/category/childComps/CategoryBar";
import CategoryLeft from "views/category/childComps/CategoryLeft";
import CategoryRight from "views/category/childComps/CategoryRight";

import {
  getCategory,
  getCategoryInfo,
  getCategoryDetail,
} from "network/category.js";
export default {
  name: "Category",
  data() {
    return {
      leftList: null,
      currMaitKey: 0,
      currminiWallkey: 0,
      rightInfo: null,
      currIndex: 0,
      current:"pop",
      goods: {
        pop: [],
        new: [],
        sell: [],
      },
    };
  },
  created() {
    this.getCategory();
    this.$bus.$on("titleClick", (index) => {
      this.currIndex = index || 0;
    });
  },
  computed: {
    showGoods() {
      return this.goods[this.current];
    },
  },
  methods: {
    getCategory(index) {
      getCategory(index).then((res) => {
        this.currIndex = index || 0; //当index没有值时则用0
        const data = res.data.category.list;
        this.leftList = data;
        this.getCategoryInfo(this.leftList[0].maitKey);
        this.getCategoryDetail("pop");
        this.getCategoryDetail("new");
        this.getCategoryDetail("sell");
      });
    },
    getCategoryInfo(maitKey) {
      getCategoryInfo(maitKey).then((res) => {
        const data = res.data.list;
        this.rightInfo = data;
      });
    },
    getCategoryDetail(type) {
      const miniWallkey = this.leftList[this.currIndex].miniWallkey;
      getCategoryDetail(miniWallkey, type).then((res) => {
        this.goods[type] = res;
        this.goods = { ...this.goods };
        // this.categoryData[this.currentIndex].categoryDetail[type] = res
        //   this.categoryData = {...this.categoryData}
      });
    },
    leftClick(index) {
      this.currMaitKey = this.leftList[index].maitKey;
      this.currminiWallkey = this.leftList[index].miniWallkey;
      this.getCategoryInfo(this.currMaitKey);
      this.getCategory(index);
    },
    titleClick(index) {
      switch (index) {
        case 0:
          this.current = "pop";
          break;
        case 1:
          this.current = "new";
          break;
        case 2:
          this.current = "sell";
      }
    },
  },
  components: {
    CategoryLeft,
    CategoryRight,
    CategoryBar,
  },
};
</script>

<style  scoped>
.category {
  height: 100vh;
  position: relative;
}
</style>
